<mat-form-field [appearance]="model.getAdditional('appearance', 'fill')"
                [color]="model.getAdditional('color', 'primary')"
                [floatLabel]="model.getAdditional('floatLabel', FORM_FIELD_OPTIONS && FORM_FIELD_OPTIONS['floatLabel'] || 'auto')"
                [formGroup]="group"
                [hideRequiredMarker]="model.getAdditional('hideRequiredMarker', false)"
                [ngClass]="getClass('grid','control')">

    <ng-container *ngIf="model.label" ngProjectAs="mat-label">

        <mat-label [innerHTML]="model.label"></mat-label>

    </ng-container>

    <span *ngIf="model.prefix" matPrefix [innerHTML]="model.prefix"></span>

    <input matInput
           [attr.accept]="model.accept"
           [attr.max]="model.max"
           [attr.min]="model.min"
           [attr.multiple]="model.multiple"
           [attr.step]="model.step"
           [autocomplete]="model.autoComplete"
           [autofocus]="model.autoFocus"
           [errorStateMatcher]="model.getAdditional('errorStateMatcher', errorStateMatcher)"
           [formControlName]="model.id"
           [id]="id"
           [maxlength]="model.maxLength"
           [matAutocomplete]="matAutocomplete"
           [minlength]="model.minLength"
           [name]="model.name"
           [ngClass]="getClass('element', 'control')"
           [pattern]="model.pattern"
           [placeholder]="model.placeholder"
           [readonly]="model.readOnly"
           [required]="model.required"
           [spellcheck]="model.spellCheck"
           [tabindex]="model.tabIndex"
           [type]="model.inputType"
           (blur)="onBlur($event)"
           (change)="onChange($event)"
           (focus)="onFocus($event)"/>

    <span *ngIf="model.suffix" matSuffix [innerHTML]="model.suffix"></span>

    <mat-hint *ngIf="model.hint !== null" align="start" [innerHTML]="model.hint"></mat-hint>

    <mat-hint *ngIf="showCharacterHint" align="end">{{ characterHint }}</mat-hint>

    <mat-error *ngFor="let message of errorMessages">{{ message }}</mat-error>

</mat-form-field>

<mat-autocomplete #matAutocomplete="matAutocomplete"
                  [autoActiveFirstOption]="model.getAdditional('autoActiveFirstOption', AUTOCOMPLETE_OPTIONS['autoActiveFirstOption'])"
                  [disableRipple]="model.getAdditional('disableRipple', RIPPLE_OPTIONS && RIPPLE_OPTIONS['disabled'] || false)"
                  [displayWith]="model.getAdditional('displayWith', null)"
                  (optionSelected)="onChange($event)">

    <ng-container *ngIf="model.getAdditional('matAutocomplete', null) === null; else displayWith">
        <mat-option *ngFor="let option of model.list$ | async" [value]="option">{{ option }}</mat-option>
    </ng-container>
    <ng-template #displayWith>
        <mat-option *ngFor="let option of model.list$ | async" [value]="option">
            {{ option[model.getAdditional('optionLabel', 'label')] }}
        </mat-option>
    </ng-template>

</mat-autocomplete>
